<template>
	<div>
		<Header></Header>
		<div class="title">
			<div>
				<span>学<font>0</font>章</span>
				<a href=""
					><img :src="require('../../assets/huo_meSon/7.jpg')" alt=""
				/></a>
				<span>暂无排名</span>
			</div>
		</div>
		<ul class="ranklist">
			<li v-for="(item, i) in _list1" :key="i">
				<div class="left">
					<a
						><img
							:src="require(`../../assets/huo_meSon/${count + i}.jpg`)"
							alt=""
					/></a>
					<a><img :src="require('../../assets/huo_meSon/5.jpg')" alt="" /></a>
					<span>{{ item.name }}</span>
				</div>
				<div class="right">
					<span>{{ item.num }}</span
					>章
				</div>
			</li>
			<li v-for="(item, i) in _list2" :key="item.name + i">
				<div class="left">
					<a>{{ i + 3 }}</a>
					<a><img :src="require('../../assets/huo_meSon/5.jpg')" alt="" /></a>
					<span>{{ item.name }}</span>
				</div>
				<div class="right">
					<span>{{ item.num }}</span
					>章
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
import Header from '../../components/Header'
import { mapState } from 'vuex'
export default {
	components: {
		Header,
	},
	data() {
		return {
			count: 8,
		}
	},
	computed: {
		...mapState(['list']),
		_list1() {
			let arr = this.list.sort((a, b) => {
				return b.num - a.num
			})
			return arr.filter((v, i) => i < 3)
		},
		_list2() {
			return this.list.filter((v, i) => i > 2)
		},
	},
	mounted() {},
}
</script>

<style lang="scss" scped>
.title {
	width: 100%;
	height: 110px;
	border-top: 1px solid #eee;
	box-sizing: border-box;
	div {
		width: 170px;
		height: 50px;
		display: flex;
		justify-content: space-between;
		margin: 29.5px auto;
		font-size: 12px;
		color: #666;
		img {
			width: 50px;
			height: 50px;
			margin: 0 5px;
		}
		span {
			line-height: 50px;
			font {
				color: #4486ff;
				font-weight: bold;
				padding: 0 3px;
				font-size: 16px;
			}
		}
	}
}
.ranklist {
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	li {
		width: 100%;
		height: 50px;
		border-top: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			line-height: 50px;
			a {
				display: block;
				height: 100%;
				width: 42px;
				box-sizing: border-box;
				padding: 8px;
				line-height: 34px;
				text-align: center;
				& + a {
					width: 50px;
				}
				img {
					width: 100%;
					height: 100%;
				}
			}
			span {
				padding: 0 0 0 5px;
				font-size: 12px;
				color: #333;
			}
		}
		.right {
			line-height: 50px;
			font-size: 12px;
			span {
				color: red;
			}
		}
	}
}
</style>